import React from 'react'
import { UdTable, UdFilter, IUdColumn, http, IUdFormItem } from '@/lib'
import { Input } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import customerApis from '@/apis/CustomerManage'
import { columnRenders } from '../../../../../lib/utils/columnRenders'
export default class CustomerDetailsTable extends React.Component<IProps> {
  private statusTranslate = {
    1: '启用',
    0: '禁用',
  }
  private filterForm: WrappedFormUtils = {} as WrappedFormUtils
  private conditions: IUdFormItem[] = [
    {
      label: '客户编码',
      id: this.props.record.agentCode?'agentCode':'acctCode',
      initialValue: this.props.record.acctCode || this.props.record.agentCode,
      render: () => {
        return <Input disabled placeholder="请输入客户编码" />
      },
    },
    {
      label: '客户名称',
      id: 'acctName',
      initialValue: this.props.record.acctName || this.props.record.agentName,
      render: () => {
        return <Input width={300} disabled placeholder="请输入客户名称" />
      },
    },
  ]
  private columns: any = this.props.record.agentCode?[
    ['员工姓名', 'userName'],
    ['员工手机号', 'phone'],
    ['客户编码', 'agentCode'],
    ['客户名称', 'agentName'],
    ['角色', 'roleName'],
    ['状态', 'isValid', columnRenders.enum(this.statusTranslate), { minWidth: '30px' }],
    ['创建时间', 'createTime'],
    ['创建人', 'createBy'],
    ['最近修改时间', 'updateTime'],
    ['最近修改人', 'updateBy'],
  ]:[
    ['序号', 'id', (text, record, index) => index + 1, { width: '50px' }],
    { title: '联系人', dataIndex: 'contactsName', minWidth: '60px' },
    { title: '联系电话', dataIndex: 'fixedPhone', minWidth: '100px' },
    {
      title: '类型',
      dataIndex: 'contactsType',
      minWidth: '60px',
      render: (text, record, index) => {
        let TYPE_ENUM = {
          ShopOwner: '店老板',
          Clerk: '店员',
          Director: '店经理',
        }
        return TYPE_ENUM[text]
      },
    },
    {
      title: '是否主要联系人',
      dataIndex: 'mainFlag',
      minWidth: '100px',
      render: (text, record, index) => (text === 'Y' ? '是' : '否'),
    },
    {
      title: '状态',
      dataIndex: 'isEffective',
      minWidth: '60px',
      render: (text, record, index) => (text === 'Y' ? '启用' : '禁用'),
    },
  ]

  state: IState = {
    page: 1,
    size: 10,
    total: 0,
    dataSource: [],
    treeDataList: [],
    loading: false,
  }

  render() {
    let { loading, dataSource,page,size,total } = this.state
    return (
      <>
        <UdFilter
          getForm={form => {
            this.filterForm = form
          }}
          items={this.conditions}
          onSearch={values => {
            this.handleSearch(values)
          }}
          loading={loading}
          resetAfter={this.resetFilterHandle}
        />
        <UdTable
          rowKey={(record, index) => index + ''}
          columns={this.columns}
          loading={loading}
          dataSource={dataSource}
          pagination={{
            current: page,
            pageSize: size,
            total: total,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '30', '40'],
            showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
          }}
          onChange={this.handleChangePage}
        ></UdTable>
      </>
    )
  }

  componentDidMount() {
    console.log(this.props?.record);
    this.getTableData()
  }

  private onOk = e => {
    e.close()
  }

  private handleSearch = (values: any) => {
    this.getTableData()
  }

  private resetFilterHandle = (form: WrappedFormUtils) => {
    this.setState({ dataSource: [] }, () => {
      this.getTableData()
    })
  }

  private handleChangePage = pagination => {
    const { current: page, pageSize: size } = pagination
    this.setState({ page, size }, () => {
      this.getTableData()
    })
  }

  private getTableData = async () => {
    this.setState({ loading: true })
    let { page, size } = this.state
    let { acctCode,agentCode } = this.filterForm.getFieldsValue()
    let params = {}
    if(acctCode){
      // 分销商 终端
      params = {
        acctCode,
        page,
        size,
      }
      http
      .get(customerApis.getContactsList, {
        params,
      })
      .then(res => {
        console.log(res);
        const dataSource = res?.data?.content ?? []
        this.setState({
          dataSource,
          total: res.data.totalElements,
        })
      })
      .finally(() => {
        this.setState({
          loading: false,
        })
      })
    }else if(agentCode){
      // 经销商
      params = {
        agentCode,
        page,
        size,
      }
      http
      .post(customerApis.getDealerList,
        params,
      )
      .then(res => {
        console.log(res);
        const dataSource = res?.data?.content ?? []
        this.setState({
          dataSource,
          total: res.data.totalElements,
        })
      })
      .finally(() => {
        this.setState({
          loading: false,
        })
      })
    }
    
  }
}

interface IProps {
  record: Record<string, any>
}
interface IState {
  page: number
  size: number
  total: number
  dataSource: Record<string, any>[]
  loading: boolean
  treeDataList: Record<string, any>[]
  searchValues?: {}
}
